<template>
  <div class="calendar">
      <div style="text-align:right" class="sel">
        <el-select v-model="year"   @change="changDate">
            <el-option v-for="i in yearArr" :key="i" :label="i" :value="i"/>
        </el-select>
        <el-select v-model="month"  @change="changDate">
            <el-option v-for="i in 12" :key="i" :label="i" :value="i" />
        </el-select>
      </div>
      <!--日历 -->
      <!-- v-model不可改变数据 使用:value  v-model 中含有value 跟@input -->
       <el-calendar :value="value">
           <template #dateCell="{data}">
               <div @click="changDay(data.day)" style="width:100%;height:100%">

            <span>{{data.day.split('-')[2]}}</span>
            <span v-if="showDay(data)">休</span>
               </div>
           </template>
       </el-calendar>
  </div>
</template>

<script>
export default {
    //接收父组件的传值
    props:{
     value:{
         type:Date,
         //复杂数据类型需要使用回调函数
         default:()=>{
             return new Date()
         }
     }
    },
data() {
    return {
        year:2021,
        month:12,
        yearArr:[],
        localDate:new Date()
    };
},
//计算属性不能变化数据所以使用watch 侦听器
watch:{

    value:{
        //页面一开始加载就监听
      immediate:true ,
      //当传入值改变时,这里的数据需要响应改变
      handler(newVal){
          this.year=newVal.getFullYear()
          this.month=newVal.getMonth()+1
          const min =this.year-5
          const max =this.year+5
          this.yearArr=[]
        // 循环得到前五年后五年,然后将得到的i 加到yearArr里
          for(let i=min;i<=max;i++){
            this.yearArr.push(i)
          }
      }

    }
},
methods:{
    //下拉变化时,日历展示跟着变化
    changDate(){
        //日历绑定的是父传过来的value ,所以直接调用父组件更改
        //此时的year跟month 已经是响应式的,所以直接转换成日期给她
        this.$emit('input',new Date(`${this.year}-${this.month}-01`))
    },
    //修改当天
     changDay(day){
      this.$emit('input',new Date(day))
     },
    //休显示
    showDay(data){
        //转换数据中的当前天
      const t =new Date(data.day)
      //获取星期几/周六=6 ,周日 = 0
      const day =t.getDay()
    //  判断当月
    const bol =data.type==='current-month'
      if(day ===0 || day===6){
          return bol && true
      }else{
          return false
      }

    }
},

}
</script>

<style lang="scss" scoped>
.calendar{
    .sel{
        margin: 20px;
    }
    ::v-deep .el-calendar__header{
        display: none;
    }
}
    
</style>